<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./main.css">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function  () {
			var num = 0;
			$('.son').click(function(event) {

				son = $(this).index();

				father = $(this).parent().index()+1;

				text = father+"排"+son+"座";

				if($(this).attr('is_sel')=='true'){

					$('.select_box span').each(function(index, el) {

						if($('.select_box span').eq(index).text()==text){

							$('.select_box span').eq(index).remove();
						}
					});

					$(this).css('background', '#B9DEA0');
					$(this).attr('is_sel', 'false');

					num--;
					$('#num').html(num);
					$('#price').html("￥"+num*100);

				}else{

					$('.select_box').append("<span>"+text+"</span>");
					
					$(this).css('background', '#E6CAC4');
					$(this).attr('is_sel', 'true');

					num++;
					$('#num').html(num);
					$('#price').html("￥"+num*100);

				}



				

				

			});
		})
	</script>
</head>
<body>
	<div class="box">
		<div class="top">
			<a href="">jQuery在线选座(影院版)</a>
		</div>
		<div class="bottom">
			<div class="left">
				<div class="left_top">屏幕</div>
				<div class="left_bottom">
					<p class="father">
						<span class="">1</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="stop">3</span>
						<span class="stop">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">2</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="stop">3</span>
						<span class="stop">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">3</span>
						<span class="hide">1</span>
						<span class="hide">2</span>
						<span class="hide">3</span>
						<span class="hide">4</span>
						<span class="hide">5</span>
						<span class="hide">6</span>
						<span class="hide">7</span>
						<span class="hide">8</span>
						<span class="hide">9</span>
						<span class="hide">10</span>
					</p>
					<p class="father">
						<span class="">4</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="son">3</span>
						<span class="stop">4</span>
						<span class="stop">5</span>
						<span class="stop">6</span>
						<span class="stop">7</span>
						<span class="stop">8</span>
						<span class="hide">9</span>
						<span class="hide">10</span>
					</p>
					<p class="father">
						<span class="">5</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="son">3</span>
						<span class="son">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">6</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="son">3</span>
						<span class="son">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">7</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="son">3</span>
						<span class="son">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">8</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="son">3</span>
						<span class="son">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">9</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="son">3</span>
						<span class="son">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="son">7</span>
						<span class="son">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
					<p class="father">
						<span class="">10</span>
						<span class="son">1</span>
						<span class="son">2</span>
						<span class="hide">3</span>
						<span class="hide">4</span>
						<span class="son">5</span>
						<span class="son">6</span>
						<span class="hide">7</span>
						<span class="hide">8</span>
						<span class="son">9</span>
						<span class="son">10</span>
					</p>
				</div>
				
			</div>
			<div class="right">
				<p><span class='title'>电影：</span>天将雄师</p>
				<p><span class='title'>时间：</span>03月20日 22:15</p>
				<p><span class='title'>座位：</span></p>
				<div class="select_box">
				</div>
				<p><span class='title'>票数：</span><span id='num'>0</span></p>
				<p><span class='title'>总价：</span><span id="price">￥0</span></p>
				<p><input class="btn" type="button" value="确定购买"></p>
				<p class="notice"><span class='select'></span>可选座<span class="issell"></span>已售出</p>
			</div>
		</div>
	</div>
</body>
</html>